<template>
  <div class="content">
    <div id="top">
      <div class="return goback">
        <div class="top_arrow returnCon"></div>
      </div>
      <div class="topMid fontW">新闻列表</div>
    </div>
    <div class="news_list">
      <img class="img_top" :src="reqData.news_banner_img_url">
      <ul>
        <li :data-news_id="list._id" v-for="list in reqData.list">
          <div class="news_img"><img :src="list.title_img"></div>
          <div class="news_con">
            <p class="news_title overtwoLine" v-text="list.title"></p>
            <p class="news_bt"><label class="overLine" v-text="list.platform"></label></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  </div>
</template>
<script>
  // 表示实例

  export default {
    name: 'newsList',
    data () {
      return {
        reqData: {}
      }
    },
    components: {},
    methods: {
      getData (params) {
        let self = this
        self.$rpc(self.$api.media_platforms, params, function (data, res) {
          self.reqData = Object.assign({}, self.reqData, data)
        })
      }
    },
    // 创建的时候请求数据
    created () {
      let page = 1
      this.getData({
        'action_type': 'get_news_list',
        'banner_id': '586ce198b806c2287a604e5b',
        'page': page,
      })
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .news_list,.news_box{background:#fff;-webkit-overflow-scrolling: touch; margin-top:44px;}
  .news_list{margin-top:24px;}
  .news_list ul li{
    width:100%; /*不给宽度火狐不支持*/
    display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /*justify-content:space-around;*/
    align-items:center;/*上下居中*/
    -webkit-align-items: center;
    border-bottom:1px solid #e5e5e5; padding:10px;
  }
  .news_list li .news_img{
    /*display:block;*/
    text-align:center;
    width:33%;
    -moz-box-flex:1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    -moz-flex:1;
    flex: 1;
    font-size:12px;
  }
  .news_list li .news_con{
    width:66%; text-align:justify; padding-left:15px;
    -moz-box-flex:2;
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    -moz-flex:2;
    flex: 2;
    font-size:12px;
  }
  .news_con .news_title{font-size:15px; color:#000; font-weight:bold; margin-bottom:15px; height:42px;}
  .news_con .news_bt{color:#727171; font-size:12px;}
  .news_con .news_bt span{background:#f1f1f1; padding:1px 10px;}
</style>
